import React from 'react'
import { IGoodList } from '@/model/declare'
import { Card } from '@/components/Card'
import { View } from '@tarojs/components'
import { GoodEle, Direction } from '@/components/Good'
import { Observer, useLocalStore } from 'mobx-react-lite'

import { cartModel } from '@/model/CartModel'

export const TwoGoodsList: React.FC<IGoodList> = (props) => {
    const store = useLocalStore(() => cartModel)

    return (
        <Card title={props.title}>
            <View className='xxm-goods-two'>
                {
                    props.items?.filter(it => it).map((it, idx) => {
                        return (
                            <Observer>
                                {() => {
                                    return (
                                        <View className='xxm-goods-two__item' key={idx}>
                                            <GoodEle
                                              direction={Direction.COLUMN}
                                              img={it.main_pic}
                                              title={it.nick || it.name}
                                              desc={it.brief}
                                              price={it.price}
                                              oldPrice={it.market_price}
                                              discount={it.dis}
                                              number={it.number || 0}
                                              id={it.id}
                                              onAdd={async (num) => {
                                                    const ans = await store.addCart({
                                                        number: num,
                                                        Good: it
                                                    })
                                                    return ans;
                                                }}
                                              key={idx}
                                            />

                                        </View>
                                    )
                                }
                                }
                            </Observer>
                        )
                    })

                }
            </View>
        </Card>
    )
}
